<template>
    <div v-if="isShow(['kanke:education:gradeclass:list-all', 'kanke:education:gradeclass:list-my'])">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="所有班级" name="first"
                v-if="hasPermission('kanke:education:gradeclass:list-all')"></el-tab-pane>
            <el-tab-pane label="我的班级" name="second"
                v-if="hasPermission('kanke:education:gradeclass:list-my')"></el-tab-pane>
        </el-tabs>
        <el-form :inline="true" ref="form" :model="form" label-width="76px" class="demo-form-inline">
            <el-form-item label="搜索班级:" prop="class_name">
                <el-input size="mini" placeholder="请输入班级名称" v-model="form.class_name"></el-input>
            </el-form-item>
            <el-form-item label="老师:" prop="teacher_id">
                <el-select size="mini" v-model="form.teacher_id" placeholder="全部" filterable clearable>
                    <el-option v-for="item in teacherList" :key="item.id" :label="item.realname" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="mini">筛选</el-button>
            </el-form-item>
        </el-form>
        <div class="table-wrap">
            <el-row class="pt20">
                <pers-button icon="" size="mini" @click="add()" perms="kanke:education:gradeclass:add" type="primary"
                    label="创建班级"></pers-button>
            </el-row>
            <el-table :data="tableData" :loading="loading" size="mini" style="width: 100%;margin-bottom: 20px;"
                row-key="id" border stripe default-expand-all>
                <el-table-column prop="class_name" label="班级名称" header-align="center" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover_url" alt=""
                            style="vertical-align: middle;width: 27px; height: 27px; margin-right: 5px;">
                        <span style="vertical-align: center;">{{ scope.row.class_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="student_num" label="学员数" header-align="center" align="center"></el-table-column>
                <el-table-column prop="teacher_name" label="班级老师" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="create_time" label="建班日期" header-align="center" align="center"></el-table-column>
                <el-table-column prop="create_user_name" label="创建人" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="state" label="操作" header-align="center" align="center">
                    <template slot-scope="scope">
                        <PersButton type="text" perms="kanke:education:gradeclass:edit" label="编辑"
                            @click="edit(scope.row)">
                        </PersButton>
                        <PersButton type="text" perms="kanke:education:gradeclass:edit" label="查看"
                            @click="detail(scope.row)">
                        </PersButton>
                        <PersButton type="text" perms="kanke:education:gradeclass:edit" label="删除"
                            @click="del(scope.row)">
                        </PersButton>
                        <!--排序放在二期 <PersButton type="text" perms="kanke:education:gradeclass:edit" label="排序" @click="setSort(scope.row)">
                        </PersButton> -->
                        <!-- <el-link type="primary" style="padding-right: 10px;" @click="detail(scope.row)">1111</el-link>
                        <el-dropdown @command="handleCommand">
                            <span class="el-dropdown-link">
                                更多
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="{ command:'edit',row:scope.row}">编辑</el-dropdown-item>
                                <el-dropdown-item :command="{ command:'detail',row:scope.row}">查看详情</el-dropdown-item>
                                <el-dropdown-item :command="{ command:'del',row:scope.row}">删除</el-dropdown-item>
                                <el-dropdown-item :command="{ command:'setSort',row:scope.row}">排序</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageInfo.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageInfo.pageSize"
                    background layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
                </el-pagination>
            </div>
        </div>
        <AddClass :visible.sync="showAddClass" @handleReload="init()" :id="classId" />
    </div>

</template>
<script>
import { hasPermission, isShow } from '@/common/permission';
import { getClassData, list, del } from "@/api/kanke/gradeclass/gradeclass";
import { getTeacherData } from "@/api/kanke/teacher/teacher";
import AddClass from './components/AddClass.vue';
let _that;
export default {
    name: 'GradeClass',
    components: {
        AddClass
    },
    data() {
        return {
            loading: false,
            activeName: 'first',
            tableData: [],
            teacherList: [],
            form: {
                class_name: '',
                teacher_id: ''
            },
            pageInfo: {
                pageSize: 10,
                pageNumber: 1,
                total: 0
            },
            showClassDetail: false,
            showAddClass: false,
            classId: 0       //子组件
        }
    },
    created() {
        _that = this;
        _that.init();
        _that.getTeacherData();
    },
    watch: {
        '$route'(to, from) {
            _that.init();
        }
    },
    methods: {
        hasPermission,
        isShow,
        init(data = {}) {
            _that.loading = true;
            let params = Object.assign(this.pageInfo, this.form, data);
            console.log('init params', params);
            list(params).then((res) => {
                console.log(res);
                _that.tableData = res.data.list;
                _that.pageInfo.total = res.data.total;
                _that.loading = false;
            })
        },
        getTeacherData() {
            getTeacherData().then((res) => {
                console.log('teacher_data_info', res);
                _that.teacherList = res.data.list;
            })
        },
        //所有班级 我的班级
        handleClick(tab, event) {
            if (tab.name == 'first') {
                this.init({ userType: 0 });
            }
            if (tab.name == 'second') {
                //当前登录teacher_id
                this.init({ userType: 1 })
            }
        },
        handleCommand(commandObj) {
            console.log('command info', commandObj);
            const { command, row } = commandObj;
            switch (command) {
                case 'edit':
                    this.edit(row);
                    break;
                case 'detail':
                    this.detail(row);
                    break;
                case 'del':
                    this.del(row);
                    break;
                case 'setSort':
                    this.setSort(row);
                    break;
                default:
                    break;
            }
        },
        add() {
            this.showAddClass = true;
            this.classId = 0;
        },
        edit(obj) {
            this.showAddClass = true;
            this.classId = obj.id;
        },
        detail(obj) {
            this.$router.push({ path: 'detailClass', query: { id: obj.id } });
        },
        del(obj) {
            if (obj.student_num > 0) {
                this.$message.error('该班级下有学生，无法删除');
                return;
            }
            this.$confirm('请确定是否将该班级删除\n' + '\n' + '此行为将不可恢复', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                del({ 'id': obj.id }).then((res) => {
                    console.log('classinfo', res);
                    if (res.code == 200) {
                        this.$message({ type: 'success', message: '删除成功!' });
                        this.init();
                    } else {
                        this.$message({ type: 'warning', message: res.msg });
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        search: function () {
            _that.loading = true;
            _that.pageInfo.pageSize = 10;
            _that.pageInfo.pageNumber = 1;
            _that.init();
        },
        handleSizeChange: function (e) {
            _that.pageInfo.pageSize = e;
            _that.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            _that.pageInfo.pageNumber = e;
            _that.init();
        }
    }
}


</script>

<style lang="scss" scoped>
.demo-form-inline {
    ::v-deep .el-select .el-input {
        width: 200px;
    }
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}
</style>